import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import {adminRoutes}from '../../routers/index';
import {withRouter}from 'react-router-dom'; 
import { Layout,Menu, Dropdown,Avatar,message ,Badge} from 'antd';
import{clearToken}from '../../utils/auth';
import {connect}from 'react-redux';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
//筛选需要展示的即:isShow:true
const routes = adminRoutes.filter((route) => route.isShow);
// console.log('routes筛选的值:',routes)
function Index(props) {
  console.log('Hello Swiftttttttttttt',props);
  const menu=(
    <Menu onClick={p=>{
      // console.log('Menu onClick的值:',p)
      if (p.key=='logOut') {
        console.log('logOut is quick')
        //清除Token盾牌
        clearToken()
        props.history.push('/login')
      }else if(p.key=='notice'){
        message.info(p.key)
        props.history.push('/admin/notices');
      }
    }}>
      <Menu.Item onClick={(item, key)=>{
        console.log('让我们来看看这里面是什么东西来的',item)
      }} key="notice">通知中心</Menu.Item>
      <Menu.Item key="setting">设置</Menu.Item>
      <Menu.Item key="logOut">退出</Menu.Item>
    </Menu>
  )  
    return (
      <Layout>
    <Header className="header">
      <div className="logo" />
      <Dropdown overlay={menu}>
        <div>
          <Avatar style={{marginRight:10}}>U</Avatar>
          <Badge dot={!props.isReadAll}><span>管理员</span></Badge>
          
        </div>
      </Dropdown>
    </Header>
    <Layout>
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{ height: '100%', borderRight: 0 }}
        >
          {routes.map(routes=>{
            return <Menu.Item
            onClick={p=>{
              props.history.push(p.key)
            }}
            key={routes.path}>
             {routes.title}    
            </Menu.Item>
          })}
        </Menu>
      </Sider>
      <Layout style={{ padding: '0px' }}>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          {props.children}
        </Content>
      </Layout>
    </Layout>
  </Layout>
      
    )
    
}
// export default withRouter(Index);
// ---------------------------------------------
export default connect(state=>state.notices)(withRouter(Index))
